<template>
  <div class="print-wrap" v-loading="loading">

    <template v-if="JSON.stringify(tableData) != '{}'">
      <div class="print-wrap-btnBox">
        <el-button ref="printBtn" type="plain-third" class="print-wrap-btnBox-btn" v-print="print">
          <i class="iconfont icon-printer"></i>{{ $t('common.base.print') }}
        </el-button>
      </div>

      <div class="print-wrap-content" id="printBox">
        <!-- 头部 -->
        <div class="print-wrap-content-header">
          <!-- logo区域 -->
          <div class="print-wrap-content-header-imgs">
            <div>
              <img class="logo_4" :src="logo_4" alt="">
              <img class="logo_5" :src="logo_5" alt="">
            </div>
          </div>
          <!-- 标题 -->
          <div class="print-wrap-content-header-title">
            ARC'TERYX产品售后回执
          </div>
          <div class="print-wrap-content-header-desc">
            <span class="value underLine">客户联</span>
          </div>
        </div>
        <!-- 表格 -->
        <div class="print-wrap-content-table">
          <table border="1">
            <!-- 第1行 -->
            <tr>
              <td class="underLine bg-color-grey">编号: NO.</td>
              <td>{{ tableData.eventNo }}</td>
              <td class="underLine bg-color-grey">接收日期Date：</td>
              <td>{{ tableData.eventCreateTime }}</td>
            </tr>
            <!-- 第2行 -->
            <tr>
              <td colspan="4" class="underLine bold">客户信息：</td>
            </tr>
            <!-- 第3行 -->
            <tr>
              <td class="bg-color-grey">姓名：Consumer Name</td>
              <td>{{ tableData.customerName }}</td>
              <td class="bg-color-grey">电话：Phone Number</td>
              <td>{{ tableData.phone }}</td>
            </tr>
            <!-- 第4行 -->
            <tr>
              <td colspan="4" class="underLine bold">产品信息：</td>
            </tr>
            <!-- 第5行 -->
            <tr>
              <td class="bg-color-grey">产品编码：SKU</td>
              <td colspan="3">{{ tableData.catalogNum }}</td>
            </tr>
            <!-- 第6行 -->
            <tr>
              <td class="bg-color-grey">品名：Product Name</td>
              <td colspan="3">{{ tableData.productName }}</td>
            </tr>
            <!-- 第7行 -->
            <tr>
              <td class="bg-color-grey">附件 Accessory</td>
              <td colspan="3">{{ tableData.attachment }}</td>
            </tr>
            <!-- 第8行 -->
            <tr>
              <td class="bg-color-grey">产品问题描述：Defect desc</td>
              <td colspan="3">{{ tableData.problemDescription }}</td>
            </tr>
            <!-- 第9行 -->
            <tr>
              <td colspan="4" class="underLine bold">售后信息：</td>
            </tr>
            <!-- 第10行 -->
            <tr>
              <td class="bg-color-grey">处理方案：Working Method</td>
              <td colspan="3">{{ tableData.treatmentScheme }}</td>
            </tr>
            <!-- 第11行 -->
            <tr>
              <td class="bg-color-grey">支付项目 Item</td>
              <td class="bg-color-grey">单价 Unit price</td>
              <td class="bg-color-grey">数量 QTY</td>
              <td class="bg-color-grey">费用 Price</td>
            </tr>
            <!-- 第12行 -->
            <tr v-for="(v,i) in serviceProductList" :key="i">
              <td>{{ v.serviceProduct }}</td>
              <td>{{ v.price }}</td>
              <td>{{ v.quantity }}</td>
              <td>{{ v.amount }}</td>
            </tr>
            <!-- 第15行 -->
            <tr>
              <td colspan="3" class="bg-color-grey" style="text-align: right;">合计费用：Service Fee </td>
              <td>{{ tableData.totalAmount }}</td>
            </tr>
            <!-- 第16行 -->
            <tr style="height: 100px;">
              <td class="bg-color-grey">备注Remark</td>
              <td colspan="3">{{ tableData.remark }}</td>
            </tr>
            <!-- 第17行 -->
            <tr>
              <td colspan="4">
                <div>
                  <div class="td-desc">请认真核对填写资料是否完整正确</div>
                  <div class="td-desc">客户关爱热线：<span class="underLine bold">400-993-0367</span>；工作时间：周一至周日 10：00-22：00
                    （特殊节假日除外）；</div>
                  <div class="td-desc">售后报修邮箱：<a class="underLine"
                      href="mailto:ASST.ArcAS@amersports.com">ASST.ArcAS@amersports.com</a></div>
                  <div class="td-desc">ReBIRD重生工坊邮箱：<a class="underLine"
                      href="mailto:ReBIRD.service@arcteryx.com">ReBIRD.service@arcteryx.com</a></div>
                </div>

                <div class="td-write">签名：</div>
                <div class="td-write">时间：</div>
              </td>
            </tr>
          </table>

        </div>
      </div>
    </template>

  </div>
</template>

<script>
/** assets */
import logo_4 from '@src/assets/img/amer-logo-4.png'
import logo_5 from '@src/assets/img/amer-logo-5.png'
/** api */
import { getAmerPrintOther } from '@src/api/EventApi.js'

const serviceProductListLengthMinLength = 3

export default {
  name: 'AmerPrintTemplateB',
  data() {
    return {
      logo_4,
      logo_5,
      print: {
        id: 'printBox',
        popTitle: '&nbsp;', //页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
      },
      tableData: {},
      loading: true
    }
  },
  computed: {
    serviceProductList() {
      const serviceProductList = this.tableData?.serviceProductList ?? []
      const serviceProductListLength = serviceProductList.length

      // 补足数据
      if (serviceProductListLength < serviceProductListLengthMinLength) {
        for (let i = 0; i < serviceProductListLengthMinLength - serviceProductListLength; i++) {
          serviceProductList.push({})
        }
      }
      return serviceProductList
    }
  },
  mounted() {
    this.eventPrint()
  },
  methods: {
    async eventPrint() {
      try {
        const { id, templateName } = this.$route.query
        if (!id || !templateName) return console.error('未知事件')
        const { status, data, message } = await getAmerPrintOther({ eventId: id, templateName })
        if (status == 0) {
          this.tableData = data
          this.$nextTick(() => {
            this.$refs.printBtn.$el.click()
          })
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.print-wrap {
  width: 100%;
  min-height: 100vh;
  height: auto;

  &-btnBox {
    width: 100%;
    text-align: right;
    padding: 20px;

    &-btn {}
  }

  &-content {
    width: 1000px;
    margin: auto;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    box-sizing: border-box;
    padding: 20px;

    &-header {
      &-imgs {}

      &-title {
        font-size: 24px;
        text-align: center;
        font-weight: bold;
        text-decoration: underline;
        padding: 10px 0;
      }

      &-desc {
        text-align: right;
      }
    }

    &-table {
      width: 100%;
      margin-top: 10px;

      table {
        width: 100%;
      }
    }
  }
}

tr {}

td {
  min-width: 100px;
  height: 30px;
  box-sizing: border-box;
  padding: 4px;

  .td-desc {
    padding: 5px 0;
  }

  .td-write {
    margin: 20px 0;
  }
}

.tb-rl {
  writing-mode: tb-rl;
  text-align: center;
}

.bg-color-grey {
  background-color: rgb(217, 217, 217);
}

.bg-color-yellow {
  background-color: rgb(196, 189, 151);
}

.underLine {
  text-decoration: underline;
}

.bold {
  font-weight: bold;
}
</style>